<template>
	<view class="dot-ring-loading">
		<view v-for="i in 12" :key="i" class="dot" :style="`--i: ${i}`"></view>
	</view>
</template>
<script setup>

</script>
<style scoped>
.dot-ring-loading {
	display: flex;
	position: relative;
	justify-content: center; /* 水平居中 */
	align-items: center; /* 垂直居中 */
	z-index: 9999; /* 确保在最顶层 */
	height: 100%;
}

.dot {
	position: absolute;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: #fff;
	transform: rotate(calc(var(--i) * 30deg)) translate(18px);
	opacity: 0;
	animation: fadeRotate 1.2s infinite;
	animation-delay: calc(var(--i) * 0.1s);
}

@keyframes fadeRotate {
	60%,
	100% {
		opacity: 0;
	}
	0% {
		opacity: 1;
	}
}
</style>
